<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('用电统计')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>设备类型：</label>
                            <input type="text" name="bianhao"/>
                        </li>
                        <li>
                            <label>设备：</label>
                            <input type="text" name="checkdate"/>
                        </li>
                        <li>
                            <label>时间：</label>
                            <input type="text" name="checkdate"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <div class="bootstrap-table bootstrap3">
                <div class="fixed-table-toolbar">
                    <div class="bs-bars pull-left">
                        <div class="btn-group-sm" id="toolbar" role="group">
                            <!--                    <a class="btn btn-success" onclick="checkItem()">-->
                            <!--                        <i class="fa fa-check"></i> 选中项-->
                            <!--                    </a>-->
                        </div>
                    </div>
                    <div class="columns columns-right btn-group pull-right">
                        <button class="btn btn-default btn-outline" type="button" name="search" aria-label="隐藏/显示搜索"
                                title="隐藏/显示搜索"><i class="glyphicon glyphicon-search"></i></button>
                        <button class="btn btn-default btn-outline" type="button" name="refresh" aria-label="刷新"
                                title="刷新"><i class="glyphicon glyphicon-refresh icon-refresh"></i></button>
                        <button class="btn btn-default btn-outline" type="button" name="toggle" aria-label="显示卡片视图"
                                title="显示卡片视图"><i class="glyphicon glyphicon-list-alt icon-list-alt"></i></button>
                        <div class="keep-open btn-group" title="列">
                            <button class="btn btn-default btn-outline dropdown-toggle" type="button"
                                    data-toggle="dropdown" aria-label="Columns" title="列" aria-expanded="false">
                                <i class="glyphicon glyphicon-th icon-th"></i>

                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li class="dropdown-item-marker" role="menuitem"><label><input type="checkbox"
                                                                                               data-field="userId"
                                                                                               value="1"
                                                                                               checked="checked"> <span>建筑</span></label>
                                </li>
                                <li class="dropdown-item-marker" role="menuitem"><label><input type="checkbox"
                                                                                               data-field="userCode"
                                                                                               value="2"
                                                                                               checked="checked"> <span>楼层</span></label>
                                </li>
                                <li class="dropdown-item-marker" role="menuitem"><label><input type="checkbox"
                                                                                               data-field="userName"
                                                                                               value="3"
                                                                                               checked="checked"> <span>时间</span></label>
                                </li>
                                <li class="dropdown-item-marker" role="menuitem"><label><input type="checkbox"
                                                                                               data-field="userPhone"
                                                                                               value="4"
                                                                                               checked="checked"> <span>设备</span></label>
                                </li>
                                <li class="dropdown-item-marker" role="menuitem"><label><input type="checkbox"
                                                                                               data-field="userEmail"
                                                                                               value="5"
                                                                                               checked="checked"> <span>用电量</span></label>
                                </li>
                                <li class="dropdown-item-marker" role="menuitem"><label><input type="checkbox"
                                                                                               data-field="userBalance"
                                                                                               value="6"
                                                                                               checked="checked"> <span>排放量</span></label>
                                </li>
<!--                                <li class="dropdown-item-marker" role="menuitem"><label><input type="checkbox"-->
<!--                                                                                               data-field="status"-->
<!--                                                                                               value="7"-->
<!--                                                                                               checked="checked"> <span>用户状态</span></label>-->
                                </li>
                                <li class="dropdown-item-marker" role="menuitem"><label><input type="checkbox"
                                                                                               data-field="8" value="8"
                                                                                               checked="checked"> <span>操作</span></label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="fixed-table-container" style="padding-bottom: 0px;">
                    <div class="fixed-table-header" style="display: none;">
                        <table></table>
                    </div>
                    <div class="fixed-table-body">
                        <div class="fixed-table-loading table table-bordered table-hover" style="top: 35.0625px;">
      <span class="loading-wrap">
      <span class="loading-text" style="font-size: 13px;">正在努力地加载数据中，请稍候</span>
      <span class="animation-wrap"><span class="animation-dot"></span></span>
      </span>

                        </div>
                        <table id="bootstrap-table" class="table table-bordered table-hover">
                            <thead class="">
                            <tr>
                                <th class="bs-checkbox " style="width: 36px; " data-field="state">
                                    <div class="th-inner "><label><input name="btSelectAll"
                                                                         type="checkbox"><span></span></label></div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th style="" data-field="userId">
                                    <div class="th-inner ">建筑</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th style="" data-field="userCode">
                                    <div class="th-inner ">楼层</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th style="" data-field="userName">
                                    <div class="th-inner ">时间</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th style="" data-field="userPhone">
                                    <div class="th-inner ">设备</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th style="" data-field="userEmail">
                                    <div class="th-inner ">用电量</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th style="" data-field="userBalance">
                                    <div class="th-inner ">排放量</div>
                                    <div class="fht-cell"></div>
                                </th>

                            </tr>
                            </thead>
                            <tbody>
                            <tr data-index="0">
                                <td class="bs-checkbox " style="width: 36px; "><label>
                                    <input data-index="0" name="btSelectItem" type="checkbox">
                                    <span></span>
                                </label></td>
                                <td>钉钉A楼</td>
                                <td>1F</td>
                                <td>20220911</td>
                                <td>AH001</td>
                                <td>15987</td>
                                <td>150</td>

                            </tr>
                            <tr data-index="0">
                                <td class="bs-checkbox " style="width: 36px; "><label>
                                    <input data-index="0" name="btSelectItem" type="checkbox">
                                    <span></span>
                                </label></td>
                                <td>钉钉A楼</td>
                                <td>1F</td>
                                <td>20220911</td>
                                <td>AH001</td>
                                <td>15987</td>
                                <td>150</td>

                            </tr>
                            <tr data-index="0">
                                <td class="bs-checkbox " style="width: 36px; "><label>
                                    <input data-index="0" name="btSelectItem" type="checkbox">
                                    <span></span>
                                </label></td>
                                <td>钉钉A楼</td>
                                <td>1F</td>
                                <td>20220911</td>
                                <td>AH001</td>
                                <td>15987</td>
                                <td>150</td>

                            </tr>
                            <tr data-index="0">
                                <td class="bs-checkbox " style="width: 36px; "><label>
                                    <input data-index="0" name="btSelectItem" type="checkbox">
                                    <span></span>
                                </label></td>
                                <td>钉钉A楼</td>
                                <td>1F</td>
                                <td>20220911</td>
                                <td>AH001</td>
                                <td>15987</td>
                                <td>150</td>

                            </tr>
                            <tr data-index="0">
                                <td class="bs-checkbox " style="width: 36px; "><label>
                                    <input data-index="0" name="btSelectItem" type="checkbox">
                                    <span></span>
                                </label></td>
                                <td>钉钉A楼</td>
                                <td>1F</td>
                                <td>20220911</td>
                                <td>AH001</td>
                                <td>15987</td>
                                <td>150</td>

                            </tr>
                            <tr data-index="0">
                                <td class="bs-checkbox " style="width: 36px; "><label>
                                    <input data-index="0" name="btSelectItem" type="checkbox">
                                    <span></span>
                                </label></td>
                                <td>钉钉A楼</td>
                                <td>1F</td>
                                <td>20220911</td>
                                <td>AH001</td>
                                <td>15987</td>
                                <td>150</td>

                            </tr>
                            <tr data-index="0">
                                <td class="bs-checkbox " style="width: 36px; "><label>
                                    <input data-index="0" name="btSelectItem" type="checkbox">
                                    <span></span>
                                </label></td>
                                <td>钉钉A楼</td>
                                <td>1F</td>
                                <td>20220911</td>
                                <td>AH001</td>
                                <td>15987</td>
                                <td>150</td>

                            </tr>
                            <tr data-index="0">
                                <td class="bs-checkbox " style="width: 36px; "><label>
                                    <input data-index="0" name="btSelectItem" type="checkbox">
                                    <span></span>
                                </label></td>
                                <td>钉钉A楼</td>
                                <td>1F</td>
                                <td>20220911</td>
                                <td>AH001</td>
                                <td>15987</td>
                                <td>150</td>

                            </tr>
                            <tr data-index="0">
                                <td class="bs-checkbox " style="width: 36px; "><label>
                                    <input data-index="0" name="btSelectItem" type="checkbox">
                                    <span></span>
                                </label></td>
                                <td>钉钉A楼</td>
                                <td>1F</td>
                                <td>20220911</td>
                                <td>AH001</td>
                                <td>15987</td>
                                <td>150</td>

                            </tr>
                            <tr data-index="0">
                                <td class="bs-checkbox " style="width: 36px; "><label>
                                    <input data-index="0" name="btSelectItem" type="checkbox">
                                    <span></span>
                                </label></td>
                                <td>钉钉A楼</td>
                                <td>1F</td>
                                <td>20220911</td>
                                <td>AH001</td>
                                <td>15987</td>
                                <td>150</td>

                            </tr>

                            </tbody>
                        </table>
                    </div>
                    <div class="fixed-table-footer"></div>
                </div>
                <div class="fixed-table-pagination" style="">
                    <div class="pull-left pagination-detail"><span class="pagination-info">
      显示第 1 到第 10 条记录，总共 26 条记录
      </span>
                        <div class="page-list">每页显示
                            <div class="btn-group dropdown dropup">
                                <button class="btn btn-default btn-outline dropdown-toggle" type="button"
                                        data-toggle="dropdown">
        <span class="page-size">
        10
        </span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li role="menuitem" class="active"><a href="#">10</a></li>
                                    <li role="menuitem" class=""><a href="#">25</a></li>
                                    <li role="menuitem" class=""><a href="#">50</a></li>
                                </ul>
                            </div>
                            条记录
                        </div>
                    </div>
                    <div class="pull-right pagination">
                        <ul class="pagination pagination-outline">
                            <li class="page-item page-pre disabled"><a class="page-link" aria-label="上一页"
                                                                       href="javascript:void(0)">‹</a></li>
                            <li class="page-item active"><a class="page-link" aria-label="第1页"
                                                            href="javascript:void(0)">1</a></li>
                            <li class="page-item"><a class="page-link" aria-label="第2页" href="javascript:void(0)">2</a>
                            </li>
                            <li class="page-item"><a class="page-link" aria-label="第3页" href="javascript:void(0)">3</a>
                            </li>
                            <li class="page-item page-next"><a class="page-link" aria-label="下一页"
                                                               href="javascript:void(0)">›</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>


    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>

</body>
</html>
